@import "./_default";
@import "./_minix";
.nav-cont {
    z-index: 9;
    @include position(fixed, 50px, 0, 0, 0);
}

.nav-mask {
    @include position(absolute, 0, 0, 0, 0);
}

.nav-list {
    background: white;
    box-shadow: 6px 6px 10px rgba(204, 204, 204, 0.16);
    @include position(absolute, 0, $b: 0, $l:0);
    @include size($w: 60px);
    .nav-item {
        padding: 1rem 0;
        @include font(1.2rem, $defalutFontColor, center);
        &.active {
            color: white;
            background: $defaultColor;
        }
    }
}

.sub-nav-list {
    border-left: 1px solid rgba(204, 204, 204, 0.4);
    width: 150px;
    background: white;
    box-shadow: 6px 6px 10px rgba(204, 204, 204, 0.16);
    @include position(absolute, 0, $b: 0, $l:60px);
    .sub-nav-item {
        padding: 1rem;
        @include font(1.2rem, $defalutFontColor);
    }
}

.nav-bottm-switch {
    z-index: 9;
    border-radius: 100%;
    border: 1px solid $defaultColor;
    @include position(absolute, $b: 10px, $l:18px);
    @include size(25px, 25px);
    @include transition(all ease-in 0.5s);
    .active {
        background: white;
        transition-duration: 0.5s;
        @include position(absolute, 10px, 10px);
        @include transition(all ease-in 0.5s);
    }
    .sup {
        transition-duration: 0.5s;
        background: white;
        @include transition(all ease-in 0.5s);
        @include position(absolute, -5px, -5px);
    }
}

.nav-bottm-switch {
    &.swichAnimate {
        transform: rotate(180deg);
        .active {
            transform: rotate(180deg);
            font-size: 1rem;
            color: #4d4f51;
            top: 13px;
        }
        .sup {
            transform: rotate(180deg);
            font-size: 1.4rem;
            color: $defaultColor;
        }
    }
    &.swichAnimateStop {
        transform: rotate(0deg);
        .active {
            transform: rotate(0deg);
            font-size: 1.4rem;
            color: $defaultColor;
        }
        .sup {
            transform: rotate(0deg);
            font-size: 1rem;
            color: #4d4f51;
        }
    } 
    // &.swichAnimate {
    //     .active {
    //         left: -4px;
    //         top: -4px;
    //         font-size: 1rem;
    //         color: #4d4f51;
    //         animation: swichAnimateActive ease 0.5s;
    //     }
    //     .sup {
    //         left: 15px;
    //         top: 15px;
    //         font-size: 1.4rem;
    //         color: $defaultColor;
    //         animation: swichAnimateSup ease 0.5s;
    //     }
    // }
    // &.swichAnimateStop {
    //     .active {
    //         left: 15px;
    //         top: 15px;
    //         font-size: 1.4rem;
    //         color: $defaultColor;
    //         animation: swichAnimateSup ease 0.5s;
    //     }
    //     .sup {
    //         left: -4px;
    //         top: -4px;
    //         font-size: 1rem;
    //         color: #4d4f51;
    //         animation: swichAnimateActive ease 0.5s;
    //     }
    // }
}

@keyframes swichAnimateActive {
    0% {
        left: 15px;
        top: 15px;
    }
    25% {
        left: 6px;
        top: -2px;
    }
    50% {
        left: 15px;
        top: -7px;
        background: none;
    }
    75% {
        left: 0px;
        top: -7px;
    }
    100% {
        left: -4px;
        top: -4px;
        background: white;
    }
}

@keyframes swichAnimateSup {
    0% {
        left: -4px;
        top: -4px;
    }
    25% {
        left: -2px;
        top: 3px;
    }
    50% {
        left: -4px;
        top: 10px;
        background: none;
    }
    75% {
        left: 4px;
        top: 8px;
    }
    100% {
        left: 15px;
        top: 15px;
        background: white;
    }
}